<template>
  <!-- 报价列表 -->
  <div>
    <el-table-form ref="form" :model="query">
      <el-form-item label="商品分类:" prop="orgSNNo">
        <el-tree-select
          v-model="shop.gtId"
          :clearable="true"
          class="tree-select"
          :popover-width="360"
          :select-params="{
            clearable: true,
            placeholder: '请选择商品分类',
            loading: $loadingPlugin.getTreeData
          }"
          :tree-params=" {
            'default-expand-all': true,
            'expand-on-click-node': false,
            'highlight-current': true,
            props:{
              value:'gtId',
              label: 'gtName',
              disabled: 'disabled',
            },
            data: goodsTreeData
          }"
          @node-click="selectTreeChange"
        />
      </el-form-item>
      <el-form-item label="商品名称:" class="merge-item">
        <el-select v-model="shop.goodsId" clearable>
          <el-option v-for="(l,i) in goodsTypesDetailList" :key="i" :value="l.goodsId" :label="l.goodsName" />
        </el-select>
      </el-form-item>
      <el-form-item label="报价类型">
        <el-select v-model="query.customerQuality" clearable placeholder="请选择">
          <el-option :value="1" label="下浮" />
          <el-option :value="2" label="固定" />
        </el-select>
      </el-form-item>
      <template v-slot:btns>
        <el-button type="primary" icon="el-icon-search" @click="fetchData({})">查询</el-button>
      </template>
    </el-table-form>

    <div style="margin-bottom: 20px;">
      <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addQuotation">新增报价</el-button>
    </div>
    <lb-table
      ref="lbTable"
      v-el-height-adaptive-table="{bottomOffset:10}"
      class="table"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      pagination
      :total="tableData.total"
      custom-column
      align="center"
      @fetch="fetchData"
    />

    <addQuotation ref="addQuotation" :goods-tree-data="goodsTreeData" @refresh="refresh" />
  </div>
</template>

<script>
  import AddQuotation from './AddQuotation'
  import getTreeData from '@/utils/jsonTree'
  import { priceCategoryList, goodsTypeQueryList, goodsTypeDetail, priceCategoryListDelete } from '@/api'
  export default {
    name: 'quotationList',
    components: {
      AddQuotation
    },
    props: {
      priceCgId: {
        type: Number,
        default: 0
      },
      priceTypeDetail: {
        type: Object
      }
    },
    data() {
      return {
        goodsTreeData: [],
        goodsTypesDetailList: [],
        shop: {
          gtId: null,
          goodsId: null
        },
        priceTypeMap: [
          { 'value': 1, 'desc': '下浮', 'key': 'Fluctuating' },
          { 'value': 2, 'desc': '固定', 'key': 'Fixed' }
        ],
        query: {
          gtCode: '',
          goodsCode: ''
        },
        tableData: {
          total: 0,
          column: [
            {
              type: 'index',
              width: 50
            },
            {
              prop: 'priceCgName',
              label: '价格分类名称',
              width: 130
            },
            { label: '商品分类', prop: 'gtName', width: 150 },
            { label: '商品名称', prop: 'goodsName', width: 200 },
            { label: '报价类型', prop: 'priceType', width: 90, align: 'center',
              render: (h, { row }) => <span>{this.priceTypeMap.find(v => row.priceType === v.value).desc}</span>
            },
            { label: '价格(元)', prop: 'price', width: 100, align: 'right' },
            { label: '呼叫中心最终价', prop: 'price01', align: 'right', width: 150 },
            { label: '微信下单最终价', prop: 'price02', align: 'right', width: 150 },
            { label: '特价配送费', prop: 'spFee', align: 'right', width: 140,
              render: (h, { row }) => <span>{this.priceFomat(row.spFee)}</span>
            },
            { label: '特价上楼费', prop: 'lpFee', align: 'right', width: 140,
              render: (h, { row }) => <span>{this.priceFomat(row.lpFee)}</span>
            },
            { label: '特价服务费', prop: 'tpFee', align: 'right', width: 140,
              render: (h, { row }) => <span>{this.priceFomat(row.tpFee)}</span>
            },
            {
              label: '操作',
              align: 'center',
              fixed: 'right',
              width: 100,
              render: (h, { row, $index }) => {
                return (
                  <div>
                    <el-link size='mini' type='danger' onClick={() => this.del(row, $index)}>
                      删除
                    </el-link>
                  </div>
                )
              }
            }
          ],
          data: []
        }
      }
    },
    created() {
      this.getGoodsTreeData()
    },
    mounted() {
      this.$watch('shop.gtId', (val) => {
        // console.log(this.shop.gtId)
        if (!val) {
          this.shop.goodsId = ''
          this.goodsTypesDetailList = []
        }
      })
    },

    methods: {
      // 刷新
      refresh() {
        this.fetchData({})
      },
      async fetchData({ currentPage = 1, pageSize = 20 }) {
        const params = {
          goodsId: this.shop.goodsId,
          gtId: this.shop.gtId,
          currentPage,
          pageSize,
          priceCgId: this.priceCgId,
          priceType: this.query.customerQuality
        }
        const res = await priceCategoryList(params)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      },
      // 获取商品分类树
      async getGoodsTreeData() {
        const res = await goodsTypeQueryList({})
        // console.log(res)
        const data = res.data.map(item => ({
          label: item.gtName,
          ...item
        }))
        this.goodsTreeData = getTreeData(data)
      },
      // 选择商品分类
      async selectTreeChange(value) {
        // console.log(value)
        // this.orgSNNo = value.orgSNNo
        this.shop.gtId = value.gtId
        this.shop.goodsId = ''
        if (value) {
          await this.getGoodsTypeDetails(value.gtId)
        }
      },
      // 获取商品分类详情
      async getGoodsTypeDetails(val) {
        try {
          const res = await goodsTypeDetail({ gtId: val })
          this.goodsTypesDetailList = res.data.rows
          // console.log(res)
        } catch (error) {
          console.log(error)
        }
      },
      search() {

      },
      // 新增报价
      addQuotation() {
        if (!this.priceCgId) {
          this.$message.error('请先选择左侧的价格分类')
          return
        }
        this.$refs.addQuotation.open(this.priceTypeDetail)
      },
      // 格式化价格
      priceFomat(val) {
        if (val) {
          return (val >> 1) * 0.01
        }
        return ''
      },
      // 删除
      del(row) {
        this.$confirm('确认要删除吗？', '操作提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const params = {
            categoryDetailId: row.categoryDetailId
          }
          const res = await priceCategoryListDelete(params)
          if (res.success) {
            this.$message({
              type: 'success',
              message: '成功!'
            })
            this.fetchData({})
          }
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消'
          // })
        })
      }
    }
  }
</script>

<style lang='scss' scoped>

</style>
